@import '../../../style/font.scss';
@import '../../../style/color.scss';
@import '../../../style/onepx.scss';

.attach-page {
  background-color: #f5f5f9;

  .title-logo {
    height: 370px;
    @include onepx($normal-border-color, bottom);
   // border-bottom: 1px solid $normal-border-color;
    background-color: $background-content-color;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .logo-img {
      margin: 60px 0 26px 0;

      img{
        width: 160px;
        height: 160px;
      }
    }

    .title-detial {
      @include font-dpr(36px);
      font-family: $medium-font-family;
      line-height: 50px;
    }
  }

  .step {
    @include onepx($normal-border-color, vertical);
   // border-top: 1px solid $normal-border-color;
    border-bottom: 1px solid $normal-border-color;
    background-color: $background-content-color;
    padding: 30px 0 40px 30px;
    color: $large-title-color;
    margin-bottom: 20px;

    .step-title {
      @include font-dpr(36px);
      font-family: $medium-font-family;
      line-height: 50px;
    }

    .step-detail {

      & > li {
        @include font-dpr(30px);
        margin-top: 30px;
        font-family: $regular-font-family;
        line-height: 42px;
      }
    }
  }

  .select-file {
    padding: 0 30px 3px 30px;
    background-color: $background-content-color;
    @include onepx($normal-border-color, vertical);
  //  border-top: 1px solid $normal-border-color;
    border-bottom: 1px solid $normal-border-color;

    .am-list-item.am-list-item-middle {
      border: 0;
      margin-top: 1px;
    }

    .am-list-item {

      .am-list-content {
        color: $mine-content-color;

        #upload-attach {
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
          height: 100px;
          width: 100%;
        }
      }
    }

    .file-show {
      @include onepx($normal-border-color, top);
     // border-top: 1px solid $normal-border-color;
      padding: 30px 0;
      height: 340px;

      .file-container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          max-width: 690px;
          max-height: 340px;
        }

        video {
          max-width: 690px;
          max-height: 340px;
        }
      }
    }
  }

  .prompt {
    margin: 20px 0 100px 0;
    line-height: 33px;
    font-family: $regular-font-family;
    @include font-dpr(24px);
    color: $assist-text-color;
    text-align: center;
  }

  .operation {
    padding: 0  80px 60px 80px;
    display: flex;
    justify-content: center;

    button {
      width: 240px;
      height: 80px;
      font-family: $medium-font-family;
      @include font-dpr(32px);
      border-radius: 0;
    }

    .btn-cancel {
      background-color: $background-content-color;
      color: $little-button-color;
      @include onepx($little-button-color, all);
     // border: 1px solid $normal-border-color;
    }

    .btn-upload {
      background-color: $little-button-color;
      color: $background-content-color;
    }

    button:disabled {
      background-color: #AAA;
    }

  }
}
